<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item label="出发地：">
          <el-input placeholder="全部" v-model="queryObj.start_address">
          </el-input>
        </el-form-item>
        <el-form-item clearable label="系列：">
          <el-select v-model="queryObj.series_id" placeholder="全部">
            <el-option v-for="item in seriesList" :key="item.series_id" :label="item.series_name" :value="item.series_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable label="状态：">
          <el-select v-model="queryObj.audit_status" placeholder="全部">
            <el-option v-for="(item, key) in statusList" :key="key" :label="item" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入线路名称/产品编号" v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <div class="mb16">
        <el-button type="primary" size="medium" @click="goto('')"
          ><i class="iconfont icon-plus"></i>添加</el-button
        >
        <el-button type="danger" size="medium" @click="goto('')"
          ><i class="iconfont icon-delete"></i>删除</el-button
        >
      </div> -->
    </div>
    <div class="mytable">
      <el-table :data="mainList" tooltip-effect="dark" stripe style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="产品编号" prop="commodity_code" >
        </el-table-column>
        <el-table-column label="封面" width="200">
          <template slot-scope="scope">
            <img
              class="categoryimg"
              v-if="scope.row.commodity_img"
              :src="imgUrl + scope.row.commodity_img.split(',')[0]"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="系列" prop="series_name" >
        </el-table-column>
        <el-table-column label="线路名称" width="200" show-overflow-tooltip prop="commodity_name" >
        </el-table-column>
        <el-table-column width="100">
          <template slot="header" >
            <span>价格（元）</span>
          </template>
          <template slot-scope="scope">
            {{scope.row.pricing}}
          </template>
        </el-table-column>
        <el-table-column label="总库存" prop="repertory_count" >
        </el-table-column>
        <el-table-column label="总销量" prop="commodity_count" >
        </el-table-column>
        <el-table-column label="出发地" prop="start_address" >
        </el-table-column>
        <el-table-column  width="120">
          <template slot="header" >
            <span>成人利润（元）</span>
          </template>
          <template slot-scope="scope">
            {{scope.row.cb_price_lr}}
          </template>
        </el-table-column>
        <el-table-column  width="120">
          <template slot="header">
            <span>儿童利润（元）</span>
          </template>
          <template slot-scope="scope">
            {{scope.row.child_cb_price_lr}}
          </template>
        </el-table-column>
        <el-table-column label="当前状态">
          <template slot-scope="scope">
            {{lineStatus[scope.row.commodity_release]}}
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            {{statusList[scope.row.audit_status]}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="role_name" label="排序">
          <template slot-scope="scope">
            <p>
              <i
                class="iconfont icon-arrowsupline bigicon"
                :class="scope.$index === 0 ? 'c999' : 'blue'"
                @click="rankUp(mainList, scope.$index)"
              ></i>
              <i
                class="iconfont icon-arrowsdownline bigicon"
                :class="scope.$index === mainList.length - 1 ? 'c999' : 'blue'"
                @click="rankDown(mainList, scope.$index)"
              ></i>
            </p>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"
              >查看</el-button
            >
            <el-button v-if="scope.row.audit_status==3" type="text" @click="shenheOpen(scope.row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <!-- // 添加编辑 -->
    <el-dialog title="商品审核" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="120px">
        <el-form-item label="线路名称：" >
          {{addForm.name}}
        </el-form-item>
        <el-form-item label="状态变更为：">
          {{addForm.ready_release=='2' ? '上架' : '下架'}}
        </el-form-item>
        <el-form-item label="审核状态：" prop="audit_status">
          <el-radio-group v-model="addForm.audit_status">
            <el-radio v-for="(item, key) in statusList2" :key="key" :label="key">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="反馈详情："  prop="remark">
          <el-input type="textarea" placeholder="请输入" :rows="4" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// import {
//   getSeriesPageList,
//   addOrModifySeries,
//   rankSeries,
//   deleteSeries
// } from 'api/lineManagement/seriesMgAPI';
// TODO  只有获取做了
import {
  getAuditCommodityList,
  auditCommodity
} from 'api/lineManagement/lineCommodity'
import { line_audit_status, line_status } from 'common/config/constConfig';
import { pageSizeArr } from 'common/config/constConfig';
import { getSeriesAll } from 'api/lineManagement/seriesMgAPI';
import config from 'api/config'

export default {
  components: {
  },
  computed: {

  },
  data() {
    return {
      statusList: line_audit_status,
      lineStatus: line_status,
      dialogMode: 'add',
      statusList2: {
        2: '通过',
        4: '不通过'
      },
      imgUrl: config.imgUrl,
      dialogFormVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      addForm: {auditInfo: {}},
      rules: {
        audit_status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      },
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    // 审核
    shenheOpen(row) {
      this.addForm = {}
      this.dialogFormVisible = true
      this.addForm.audit_id = row.auditInfo.audit_id
      this.addForm.commodity_id = row.commodity_id
      this.$set(this.addForm, 'ready_release', row.auditInfo.ready_release)
      this.$set(this.addForm, 'name', row.commodity_name)
    },
    goto(row) {
      this.$router.push({
        path: "/home/lineReviewDetail",
        query: { id: row.commodity_id, type: "look" }
      });
    },
    async doAction() {
      await this.$refs.addForm.validate();
      let data = { ...this.addForm };
      await auditCommodity(data)
      this._caozuoAfter('审核成功')
    },
    _caozuoAfter(msg){
      this.dialogFormVisible = false
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    rankUp(arr, index) {
      if (index === 0) {
        return;
      }
      let sendObj = {};
      sendObj.curr_id = arr[index].series_id;
      sendObj.other_id = arr[index - 1].series_id;
      this._rank(sendObj);
    },
    rankDown(arr, index) {
      let len = arr.length;
      if (len - 1 === index) {
        return;
      }
      let sendObj = {};
      sendObj.curr_id = arr[index].series_id;
      sendObj.other_id = arr[index + 1].series_id;
      this._rank(sendObj);
    },
    _rank() {
      // rankSeries(data).then(res => {
      //   if (res) {
      //     this._caozuoAfter('操作成功');
      //   }
      // });
    },
    del(row) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row);
      });
    },
    _del() {
      // deleteSeries(row.series_id).then(res => {
      //   this._caozuoAfter(res.rMsg);
      // });
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    changeMoney(arr) {
      arr.forEach(item=> {
        item.cb_price_lr = (item.pricing - item.cb_price) / 100
        item.child_cb_price_lr = (item.pricing - item.child_cb_price) / 100
        item.pricing /= 100
      })
      return arr
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      data.pageInfo = { ...this.page };
      getAuditCommodityList(data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = this.changeMoney(res.rData);
      });
    },
    // huo qu 系列
    async _getSeriesAll() {
      let res = await getSeriesAll()
      this.seriesList = res.rData
    }
  },
  created() {
    this._mainList();
    this._getSeriesAll();
  }
};
</script>

<style lang="scss" scoped></style>
